<template>
  <div class="cbsj">
    <div class="space-around bdb pb20 pt20">
      <div class="flex align-center">
        <img
          class="image"
          :src="imgUrl + '/profile/personinfo/2023/9/22/永久基本农田_ef6ee628cf8543fd896cf4f47c71662d.png'"
        />
        <div class="ml10 tac">
          <div class="fs18 bold">{{ parseFloat(dataInfo.val11).toFixed(2) || 0 }}</div>
          <div class="fs12 mt10">承包农田(亩)</div>
        </div>
      </div>
      <div class="flex align-center">
        <img
          class="image"
          :src="imgUrl + '/profile/personinfo/2023/9/22/承包区_d513ee8975bf42aaa5a8316d822c12b8.png'"
        />
        <div class="ml10 tac">
          <div class="fs18 bold">{{ parseFloat(dataInfo.val4).toFixed(0) || 0 }}</div>
          <div class="fs12 mt10">承包家庭(户)</div>
        </div>
      </div>
    </div>
    <div class="space-around mt40">
      <div class="tac text-overflow">
        <div class="fs18 bold">{{ parseFloat(dataInfo.val10).toFixed(0) || 0 }}</div>
        <div class="fs12">流转家庭(户)</div>
      </div>
      <div class="tac text-overflow">
        <div class="fs18 bold">{{ list[0] || 0 }}</div>
        <div class="fs12">自种家庭(户)</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Cbsj',
  props: {
    dataInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      imgUrl: process.env.VUE_APP_IMG_API,
      list: []
    }
  },
  created() {
    this.list = this.dataInfo.val18 ? this.dataInfo.val18.split(',') : [0, 0, 0, 0, 0, 0]
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.cbsj {
  height: 213px;
}
.image {
  height: 60px;
  width: 60px;
}
</style>
